<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .logonBody {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logon {
            width: 25%;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            background-color: #FFFFFF;
            padding: 20px;
        }

        .logon h2 {
            padding-bottom: 10px;
            border-bottom: 2px solid #ccc;
        }

        .logonY {
            padding: 20px;
            text-align: center;
        }

        .logonY button {
            width: 100%;
        }

        .el-form-item__content {
            margin-left: 0 !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="logonBody">
        <div class="logon">
            <h2>登录</h2>
            <div class="logonY">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="" prop="username">
                        <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.username"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            var validateUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    password: 'jklpoh123.00',
                    username: 'admin'
                },
                rules: {
                    password: [{
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    username: [{
                        validator: validateUsername,
                        trigger: 'blur'
                    }]
                },
                lock: false
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (!this.lock) {
                            this.lock = true;
                            const formData = new FormData();
                            formData.append("username", this.ruleForm.username);
                            formData.append("password", this.ruleForm.password);

                            axios.post("/user/logon", formData)
                                .then((response) =>{
                                    response = response.data;
                                    if(response.code!==200){
                                        this.$message.error(response.message);
                                    }else {
                                        sessionStorage.setItem("permissionId",response.data.permissionId);
                                        sessionStorage.setItem("name",response.data.name);
                                        location.href = "/page/homepage"
                                    }
                                })
                                .finally(() =>{
                                this.lock = false;
                            })
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>